<template>
  <a-modal
    title="编辑账单"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <h3>当前:</h3>
      <a-row class="title-it">
        <a-col :span="24">
          租期：{{ leaseData.rentStartDate }}~{{ leaseData.rentEndDate }}
        </a-col>
        <a-col :span="24">
          租金：{{ leaseData.rent }}
        </a-col>
        <a-col :span="24">
          押金：{{ leaseData.deposit }}
        </a-col>
      </a-row>
      <h3>調整:</h3>
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <div>
                <a-form-item
                label="租期"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-date-picker
                  v-model="startValue"
                  :disabled="true"
                  :disabled-date="disabledStartDate"
                  format="YYYY-MM-DD"
                  placeholder="開始時間"
                  @openChange="handleStartOpenChange"
                />
                <a-date-picker
                  v-model="endValue"
                  :disabled-date="disabledEndDate"
                  format="YYYY-MM-DD"
                  placeholder="結束時間"
                  :open="endOpen"
                  @openChange="handleEndOpenChange"
                />
                <a-button style="margin-left: 10px;" type="dashed" size="small" :class="mocheck === 1 ? 'mocheck' : ''" @click="getEndTimeByStartTime(1)">三个月</a-button>
                <a-button  type="dashed" size="small" :class="mocheck === 2 ? 'mocheck' : ''" @click="getEndTimeByStartTime(2)">半年</a-button>
                <a-button  type="dashed" size="small" :class="mocheck === 3 ? 'mocheck' : ''" @click="getEndTimeByStartTime(3)">一年</a-button>
                <a-button  type="dashed" size="small" :class="mocheck === 4 ? 'mocheck' : ''" @click="getEndTimeByStartTime(4)">两年</a-button>
                </a-form-item>
                <!-- <a-form-item
                label="租金涨降"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <a-radio-group :default-value="1" @change="handleFormLayoutChange"  v-decorator="['zjStyle']">
                  <a-radio-button :value="1">
                    涨
                  </a-radio-button>
                  <a-radio-button :value="2">
                    降
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
               <a-form-item
                label="租金"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
              <a-input-number
                  style="width:100%"
                  :precision="2"
                  :min="0"
                  :max="99999999"
                  :step="10"
                  @change="amountChange"
                  v-decorator="['amount', { initialValue: 0, rules: [{required: true, message: '請輸入金额'}]}]"/>
              </a-form-item> -->
              </div>
      </a-form>
      <h3>调整后周期:</h3>
      <a-row class="">
        <a-col :span="8">
        </a-col>
        <a-col :span="8">
          租期：{{ moment(this.startValue).format('YYYY-MM-DD') }}~{{ moment(this.endValue).format('YYYY-MM-DD') }}
        </a-col>
        <a-col :span="8">
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { detailForEdit, ownerLeaseEditXz } from '@/api/modular/main/ownerlease/ownerLeaseManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        retrieveDateString: '',
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        leaseData: {},
        startValue: null,
        endValue: null,
        endOpen: false,
        mocheck: 1,
        zjStyle: 1,
        amount: 0.00
      }
    },
    computed: {
      jisuanAmnunt() {
        if (this.zjStyle === 1) {
          return this.leaseData.rent + this.amount
        } else {
          return this.leaseData.rent - this.amount
        }
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit(record) {
        this.visible = true
        this.getLeaseDetail(record)
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record
            }
          )
        }, 100)
      },
      getLeaseDetail(id) {
        detailForEdit(id).then((res) => {
          if (res.code === 200) {
            this.leaseData = res.data
            this.startValue = moment(this.leaseData.rentEndDate).add(1, 'day').format('YYYY-MM-DD')
            this.getEndTimeByStartTime(1)
          } else {
          }
        })
      },
      disabledStartDate(startValue) {
        const endValue = this.endValue
        if (!startValue || !endValue) {
          return false
        }
        return startValue.valueOf() > endValue.valueOf()
      },
      handleStartOpenChange(open) {
        if (!open) {
          this.endOpen = true
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open
      },
      disabledEndDate(endValue) {
        const startValue = this.startValue
        if (!endValue || !startValue) {
          return false
        }
        return startValue.valueOf() >= endValue.valueOf()
      },
      getEndTimeByStartTime(type) {
        let month = 3
        if (type === 1) {
          month = 3
        } else if (type === 2) {
          month = 6
        } else if (type === 3) {
          month = 12
        } else if (type === 4) {
          month = 24
        }
        this.mocheck = type
        this.endValue = moment(this.startValue).add(month, 'months').subtract(1, 'days').format('YYYY-MM-DD')
      },
      handleFormLayoutChange(e) {
         this.zjStyle = e.target.value
      },
      amountChange(value) {
        this.amount = value
      },
      handleSubmit () {
        const vb = moment(this.startValue).add(1, 'day').isBefore(this.endValue)
        if (!vb) {
          this.$message.error('租期開始時間不允許大於結束時間！')
          return false
        }
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.rentStartDate = moment(this.startValue).format('YYYY-MM-DD')
            values.rentEndDate = moment(this.endValue).format('YYYY-MM-DD')
            ownerLeaseEditXz(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('续租成功！')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)//  + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      onChangerentedDay(date, dateString) {
        this.retrieveDateString = dateString
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.leaseData = {}
        this.endOpen = false
        this.startValue = null
        this.endValue = null
        this.amount = 0.00
        this.zjStyle = 1
      }
    }
  }
</script>

<style scoped>
.title-it{
  background-color: aquamarine;
  padding: 10px 0px;
}
.mocheck{
  background-color: rgba(58, 136, 180, 0.822);
  color: aliceblue;
}
</style>
